<template>
    <section>
        <el-scrollbar height="600px" always>
            <UserDetail v-show="props.contactType === 'newFriends'" ref="newFriends" :previewData="props.target" />
            <GroupDetail v-show="props.contactType === 'groupChat'" :previewData="props.target" />
            <FriendsDetail v-show="props.contactType === 'user'" @updateView="updateView" :previewData="props.target" />
        </el-scrollbar>
    </section>
</template>

<script setup>
const newFriends = ref()
const props = defineProps({
    contactItem: {
        type: Object,
        default: () => ({

        })
    },
    target: {
        type: Object,
        default: () => ({})
    },
    contactType: {
        type: String,
        default: ''
    }
})

const cmit = defineEmits(['updatePreview'])

const updateView = () => {
    cmit('updatePreview')
}

watch(() => props.contactType, (n, o) => {
    if (n === 'newFriends') {
        newFriends.value.getRequestList()
    }
    if (n === 'user') {

    } 
}, {
    deep: true
})
</script>